import { useEffect, useState } from 'react';
import Hr from '../../components/hr';
import { Query as Q1, Result as R1, } from '../api/activity/querytemplate.api';
import api from '../../atoms/api';
import smartfetch from '../../atoms/smartfetch';
import GroupTitle from '../../components/grouptitle';
import Btn from '../../components/btn';
import { IData } from '../api/activity/fielddata.api';
import uuid from '../../atoms/uuid';



export default function Template({
	ids,
	onOk,
	onCancel,
}: {
	ids: IData[];
	onOk(fields: IData[], isCustom: boolean): void;
	onCancel(): void;
}) {
	//选择字段
	const [selFields, setSelFields] = useState<IData[]>([]);
	//报名字段信息数据
	const [fielddata, setFieldData] = useState<R1>({
		data: []
	});
	//加载数据
	async function Load() {
		const f = ids.map((x) => { return x; });
		setSelFields(f);
		const fieldData = await smartfetch<R1, Q1>(api['/api/activity/querytemplate'], 'get');
		setFieldData(fieldData);
	}
	useEffect(() => {
		void Load();
	}, [ids]);
	return <>
		<div className='v'>
			<GroupTitle title='请选择模板数据项' />
			<div className='temdata'>
				{fielddata.data.map((it) => {
					return <div key={it.id}>
						<input className={selFields.find((x => { return x.did === it.id; })) ? 'cbfield' : 'field'} type='button' value={it.name} onClick={() => {
							if (selFields.find((x => { return x.did === it.id; }))) {
								setSelFields(selFields.filter((x) => { return x.did !== it.id; }));
							}
							else {
								const f = selFields.map((x) => { return x; });
								f.push({
									id: uuid(),
									did: it.id,
									name: it.name,
									type: it.type,
									alternative: it.alternative,
									isrequired: 0,
									itemtype: 1
								} as IData);
								setSelFields(f);
							}
						}} />
					</div>;
				})}
			</div>
			{/* 按钮 */}
			<div className='btn'>
				<Hr />
				<Btn label='确定' onClick={() => {
					onOk(selFields, false);
				}} />
				<Btn label='自定义数据项' onClick={() => {
					onOk(selFields, true);
				}} />
				<Btn label='取消' isRed onClick={() => {
					const f = ids.map((x) => { return x; });
					setSelFields(f);
					onCancel();
				}} />
			</div>
			<style jsx>{`
.v{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 95%;
height: 410px;
background-color: #FFFFFF;
border-radius: 1.875rem;
}
.temdata{
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
align-items: center;
margin-top: -4rem;
}
.field,.cbfield{
border-radius: 0.625rem;
font-size: 0.875rem;
 height: 1.5rem;
border-color: #000000;
border-width: 0.0625rem;
border-style: solid;
margin-left: 1rem ;
margin-top: 1rem ;
}
.field{
background-color: #FFFFFF;
color: #001822;
}
.cbfield{
background-color: #001822;
color: #FFFFFF;
}

.btn{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 0;
}
.data{
background-color: #FFFFFF;
border-radius: 0.625rem;
color: #000000;
font-size: 1.125rem;
width: 13.75rem;
 height: 2.5rem;
border-color: #000000;
border-width: 0.0625rem;
border-style: solid;
margin-bottom: 0.5rem;
}
.cancel{
background-color: #FFFFFF;
border-radius: 0.625rem;
color: #AF1C1C;
font-size: 1.125rem;
width: 13.75rem;
 height: 2.5rem;
border-color: #AF1C1C;
border-width: 0.0625rem;
border-style: solid;
margin-bottom: 0.5rem;
}
			`}</style>
		</div>
	</>;
}
